<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1{
                width: 200px;
                height: 200px;
                background-color: red;
                /*position: absolute;*/
                /*left: 50%;*/
            }

            #d2{
                width: 100px;
                height: 100px;
                background-color: blue;
                position: absolute;
                left: 30px;
                top: 30px;
            }

            #d3{
                width: 300px;
                height: 300px;
                background-color: yellow;
                position: relative;
                left: 30px;
                top: 30px;
            }

            #d4{
                width: 100px;
                height: 100px;
                background-color: green;
                position: fixed;
                left: 0px;
                top: 0px;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <div id="d2"></div>
        </div>

        <div id="d3"></div>

        <div id="d4"></div>

        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    </body>
</html>